<template>
  <!-- 周电量详情 -->
  <div class="-content">
    <div class="search-content">
      <Col class="panel content-header" :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);" class="link" @click="backToLast">
              <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>周电量详情</span></span>
          </span>
        </h5>
      </div>
      </Col>
    </div>
    <div>
      <Row>
        <Col span="24" v-if="showTimeRange" style="padding:10px;box-sizing:border-box;">
        <DatePicker style="width:240px;" type="daterange" :options="options" class="time-picker" v-model="timeDate" @on-change="onTimeChange" placement="bottom-end" placeholder="请选择日期..." show-week-numbers></DatePicker>
        </Col>
        <!-- 折线图 -->
        <Col span="24" class="panel map-panel" style="margin-bottom:15px;">
        <div style="width:100%;height:350px;" class="blank-chart">
          <div ref="chart" style="width: 100%;height: 100%;"></div>
        </div>
        </Col>
        <!-- 表格 -->
        <Col class="panel table-panel" :span="24" style="overflow-x: auto;margin-bottom: 20px;">
        <table class="mailTable" v-if="JSON.stringify(tableData)!=='{}'">
          <tr>
            <td>总电量（kWh）</td>
            <td colspan="3">{{tableData.totalValue}}</td>
          </tr>
          <tr>
            <td>峰电量（kWh）</td>
            <td>{{tableData.peakValue}}</td>
            <td>平电量（kWh）</td>
            <td>{{tableData.flatValue}}</td>
          </tr>
          <tr>
            <td>谷电量（kWh）</td>
            <td>{{tableData.valleyValue}}</td>
            <td>平电量（kWh）</td>
            <td>{{tableData.sharpValue}}</td>
          </tr>
        </table>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
import { getNxPowerDetail, getIdByDeviceNo, getDeviceDetail } from "@/api"
import mixin from "./mixin"
import utils from "@/utils/utils"

const { isBlankArray } = utils
export default {
  mixins: [mixin],
  computed: { ...mapGetters(["color"]) },
  mounted() {
    this.initData()
  },
  data() {
    const vm = this
    return {
      tableData: {},
      echartInstence: null
    }
  },
  methods: {
    onTimeChange() {
      const vm = this
      if (Array.isArray(vm.timeDate)) {
        const value = vm.timeDate
        if (isBlankArray(value)) {
          vm.timeDate = [
            vm
              .moment()
              .add(-6, "days")
              .format(),
            vm.moment().format()
          ]
        }
        const timeStart = vm.moment(vm.timeDate[0]),
          timeEnd = vm.moment(vm.timeDate[1]),
          days = timeEnd.diff(timeStart, "days")
        if (days === 7) {
          vm.initData()
        } else {
          vm.$Message.error("只能选择7天")
        }
      }
    },
    initData() {
      const { id, name } = this.$route.params
      const vm = this,
        timeDate = vm.timeDate,
        date = [
          ...vm.timeDate.map(t => vm.moment(t).format("YYYY-MM-DD"))
        ].join("~"),
        params = {
          deviceNo: id,
          date
        },
        options = {
          title: {
            text: name,
            left: "center",
            subtext: date
          },
          color: ["#3398DB"],
          legend: {
            data: [date],
            bottom: 0
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter(params) {
              return `${params[0].data} kWh<br/>${params[0].marker} ${
                params[0].seriesName
              } ${params[0].axisValue}`
            }
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "50"
          },
          xAxis: [
            {
              type: "category",
              data: [...new Array(24)].map((t, i) => `${++i}:00`),
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              name: `单位(kWh)`,
              type: "value"
            }
          ],
          series: [
            {
              name: date,
              type: "bar",
              data: []
            }
          ]
        }

      vm.$nextTick(() => {
        const dom = vm.$refs.chart
        vm.echartInstence = vm.echarts.init(dom)
        vm.echartInstence.showLoading({ text: "", color: "red" })
        getNxPowerDetail(params).then(res => {
          const {
            data: { list, fpgj },
            code
          } = res
          if (code === 200) {
            options.series[0].data = list
            vm.tableData = fpgj
            vm.echartInstence.setOption(options)
            vm.echartInstence.hideLoading()
          }
        })
      })
    },

    backToLast() {
      this.$router.go(-1)
    }
  }
}
</script>
